<template>
	<view class="pet-kinds">
		<view id="headinga">
			<top-nav
				:back="myback" 
				:topMainBackGroundColor="topMainBackGroundColor" 
				:navMarginTop="navMarginTop"
				:topBackgroundColor="topBackgroundColor"
				:topHeight="topHeight"
				:title="title">
			</top-nav>
		</view>
		<!-- navScroll -->
		<!-- navNow -->
		<view style="background-color: #f8f8f8;display: flex;" class="left-nav">
			<view style="width: 20%;background-color: #fff;margin-right: 20rpx; height: 500px;">
				<swiper  :duration="500" 
				:vertical="true"
				:display-multiple-items="navCount"
				style="height:280px"
				:current-item-id="navScroll"
				>
					<swiper-item v-for="item,index in navList" :key="index"
					:item-id="item.navId"
					>
						<view
						:style="navNow==item.navId?'background-color:#f8f8f8;':'background-color: #fff;'"
						:class="navNow==item.navId? 'item active' : 'item'"
						@click="onNav(item,item.navId)">
							{{item.navName}}
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			
			
			<scroll-view 
			:scroll-y="true" 
			:scroll-with-animation="true"  
			:enable-back-to-top="true"
			:style="'height:'+hh+'px'"
			:scroll-into-view="scrollintoview"
			@scroll="myonPageScroll"
			class="scroll-container"
			>
				<view v-for="(item,index) in mainList" :key="index" 
				:id="item.navId"
				:data-nav-id="item.navId"
				:data-nav-scroll-id="item.navScrollId"
				class="trip main-item">
					<view style="width: 100%;;display: flex;flex-wrap: wrap;justify-content: space-between;">
						<view class="title" >{{item.mainName}}</view>
						<view v-for="(item_find,index_find) in item.data" :key="index_find" class="pet-item" @click="mainItemClick(item_find.name, item.mainName)">
							<!-- <u-avatar :src="src"></u-avatar> -->
							<text class="aniName">{{item_find.name}}</text>
							
						</view>
						
						<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
						<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
						<!-- 自定义页面布局end -->
						<!-- 自定义页面布局end -->
						<!-- 自定义页面布局end -->
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import topNav from '@/components/topnav/topNav.vue'
	import { getBreedList } from '@/service/pets/pet.js'
	export default {
		components: {
			topNav
		},
		data() {
			return {
				// 导航栏
				myback: {
					show: true
				},
				title: '宠物分类',
				topMainBackGroundColor: '#fff',
				topBackgroundColor: '#fff',
				navMarginTop: 0,
				topHeight: 50,
				src: '/static/icon_img/del.png',
				list_data_right:[],
				list_data_left:[],
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				
				
				heightleft:100,
				
				
				hh:0,
				scrolltop:0,
				scrollintoview:'',
				
				
				mainList:[],
				navList:[],
				
				// petBreedLcist
				petBreedList: [],
				
				navCount:0,
				navNow:0,
				vue_all_list:[],
				
				my_hua_dong_num:0,
				
				
				navScroll:''
			};
		},
		
		async onLoad() {
			console.log('请求')
			const res = await getBreedList()
			this.petBreedList = res.data
			console.log('this.petList',this.petBreedList)
			this.list_data_left_api()
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask: true
			// });
			let list = [{}];
			for (let i = 0; i < 26; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
				list[i].id = i;
			}
			this.list = list;
			this.listCur = list[0];
		},
		onReady() {
			this._onReadyApi()
			// uni.hideLoading()
		},
		methods: {
			mainItemClick(mainItem, navId) {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length -2]
				prevPage.$vm.getValue(mainItem, navId)
				uni.navigateBack({
					delta: 1
				})
			},
			myonPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
				this.my_hua_dong_num = Math.round(e.detail.scrollTop).toString()
				var num = e.currentTarget.offsetTop + e.detail.scrollTop
				var ww = this.vue_all_list.find(
					v => v.top >= num
				)
				
				if (e.detail.scrollTop<=70) {
					this.navNow = this.navList[0].navId
				} else {
					this.navNow = ww.id
				}
				
				if (ww.dataset.navScrollId) {
					this.navScroll = ww.dataset.navScrollId
				} else {
					this.navScroll = this.navNow
				}
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;   
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			},
			
			test() {
				var that = this
				//mainList
				var mainList = []
				var navList = []
				var list_data_left = []
				var navScrollId = ''
				let prevNav = ''
				this.petBreedList.forEach((item,index) => {
					const mainId = item.petBreedList.id
					const navId = item.id
					const mainName = item.name
					const tId = (10000+index).toString()
					if(!prevNav) {
						navId
						prevNav = navId
					}
					mainList.push({
						id: mainId,
						navId: navId,
						navScrollId: prevNav,
						data: item.petBreedList
					})
					
					navList.push({
						navId: navId,
						mainId: mainId,
						label: item.id
					})
					prevNav = navId
				})
			},
			
			list_data_left_api() {
				var that = this
				//mainList
				var mainList = []
				var navList = []
				var list_data_left = []
				var navScrollId = ''
				let prevNav = ''
				// this.petBreedList.forEach((item,index) => {
				// 	console.log('ddd',item)
				// })
				this.petBreedList.forEach((item,index) => {
					let navId = 'nav-'+ item.id 
					let navName = item.name
					let mainName = ''
					let mainId = ''
					item.petBreedList.forEach((item2,index2) => {
						console.log('item2',item2,index)
						mainName = item2.name
						mainId = 'main-' + item2.id
					})
					const tId = (10000+index).toString()
					if(!prevNav) {
						navId = 'nav-' +Math.random()
						prevNav = navId
					}
					mainList.push({
						id: mainId,
						navId: navId,
						mainName: mainName,
						navScrollId: prevNav,
						data: item.petBreedList
					})
					
					navList.push({
						navId: navId,
						mainId: mainId,
						navName: navName,
						label: tId
					})
					prevNav = navId
				})
				
				this.mainList = mainList
				this.navList = navList
				console.log(this.navList)
				console.log(this.mainList)
				
				this.navNow = this.navList[0].navId
				setTimeout(function(){
					wx.createSelectorQuery().selectAll('.main-item').fields({
							// id:true,
							id:true,
							dataset:true,
							rect:true,
						}).exec(res=>{
							that.vue_all_list = res[0]
							console.log('vue_all_list',that.vue_all_list)
						})
				},300)
			},
			
			list_data_right_api() {
				var list_data_right = []
				
				var i=0
				for(i;i<100;i++) {
					list_data_right.push({
						id:(10000+i).toString(),
						start:'呵呵'
					})
				}
				
				this.list_data_right = list_data_right
				
				console.log(this.list_data_right)
				
			},
			onNav(e,kk) {
				console.log('e,kk', e,kk)
				var value = e.navId
				if (e) {
					this.scrollintoview = value
					
					this.navNow = kk
				}
				
			},
			_onReadyApi() {
				var windowHeight = uni.getSystemInfoSync().windowHeight
				console.log(windowHeight)
				var that = this
				uni.createSelectorQuery().select('#headinga').boundingClientRect((res) => {
					// that.hh = 40 * that.navList.length
					that.hh = windowHeight - res.height
					// console.log('hh',that.hh)
					
					that.navCount = Math.round(that.hh/85)
				}).exec()
			}
		},
	}
</script>

<style lang="scss" scoped>
	
	.pet-kinds {
		background-color: #f8f8f8;
	}
	/deep/ .topMain .title {
		position: relative;
		left: -16px;
		margin: 0 auto;
		font-weight: 600;
	}
	
	.scroll-container {
		background-color: #fff;
	}
	
	.main-item {
		margin-top: 0;
		margin-bottom: 10rpx;
		border-radius: 0rpx;
		border: 0rpx solid red;
		padding: 20rpx 30rpx 0 30rpx;
	}
	
	.let-nav {
		color: #000;
	}
	
	.left-nav .item {
		position: relative;
		margin-top: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000;
	}
	
	.left-nav .item.active::after {
		position: absolute;
		content: '';
		height: 40rpx;
		width: 4px;
		border-radius: 2px;
		right: 0;
		top: 25rpx;
		background-color: #e68192;
	}
	
	.pet-item {
		height: 30px;
		width: 100%;
		margin-bottom: 10px;
		border-bottom: 1px #eee solid;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.main-item .title {
		width: 100%;
		height: 50rpx;
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 25px;
	}
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
	// .aniName {
	// 	display: inline-block;
	// 	margin-left: 50px;
	// }
</style>
